
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>2、扣子空间（Coze Space）平台介绍 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>2、扣子空间（Coze Space）平台介绍 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是扣子空间（Coze Space）及其平台定位？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">扣子空间是字节跳动于2025年4月推出的一款通用型AI Agent开发与协同办公平台。其平台定位是“人与AI智能体协作的工作空间”，旨在通过智能化工具提升用户的工作效率和创造力。</div>
          </div>
          <div class="card-source">来源: 文档开篇介绍部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">MCP协议在扣子空间的技术架构中扮演什么角色？文档中用了一个什么比喻来形容它？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">MCP协议是扣子空间的核心技术亮点，它定义了AI与外部工具的标准化交互接口，解决了传统Function Call的兼容性问题。文档中将其比喻为“大模型的USB-C接口”。</div>
          </div>
          <div class="card-source">来源: 技术架构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">扣子空间提供了哪两种操作模式？它们分别适用于什么场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">平台提供“探索模式”和“规划模式”。探索模式适合简单需求，AI快速执行，响应时间可缩短30%；规划模式适合金融、医疗等高复杂性任务，AI会生成详细计划并与用户协作确认，以确保结果准确性。</div>
          </div>
          <div class="card-source">来源: 核心功能 - 2. 探索与规划双模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">扣子空间是如何实现“智能任务拆解与执行”的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">扣子空间能够自动分析用户需求，将复杂任务拆解为多个子任务，然后通过其AI Agent自主调用各种工具（如浏览器、代码编辑器、飞书文档等）来完成这些子任务。</div>
          </div>
          <div class="card-source">来源: 核心功能 - 1. 智能任务拆解与执行</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">扣子空间的插件生态系统有哪些关键特点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其插件生态的关键特点包括：1. 基于MCP协议，集成了超过60个插件；2. 提供“Coze Store”供用户自定义和发布插件；3. 支持与企业内部系统（如MySQL、ClickHouse）无缝集成。</div>
          </div>
          <div class="card-source">来源: 核心功能 - 3. 丰富的插件生态</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">扣子空间如何支持多模态交互和知识库管理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">平台支持文本、图像、语音等多种交互方式。在知识库管理方面，用户可以上传PDF或网页文本，AI能够基于这些数据进行问答或内容生成，并通过长期记忆能力提升交互连贯性。</div>
          </div>
          <div class="card-source">来源: 核心功能 - 4. 多模态交互与知识库管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">文档中提到的“人在环路”机制是如何实现的，它带来了什么好处？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该机制通过“规划模式”实现，用户可以实时查看任务拆解和中间结果，并与AI协作确认。这样做的好处是避免了AI执行过程中的“黑盒”风险，实现了高效的人机协作。</div>
          </div>
          <div class="card-source">来源: 优势与不足 - 优势</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">在企业解决方案方面，扣子空间有何具体应用案例，并取得了怎样的效果？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个具体的应用案例是为司法领域开发的定制化调解Agent。该Agent能与法院系统联动，其应用使得案件处理效率提升了80%。</div>
          </div>
          <div class="card-source">来源: 应用场景 - 企业解决方案</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">扣子空间在开源方面有哪些重要举措？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在2025年7月25日，扣子空间宣布开源其两大核心业务：Coze Studio（开发平台）和Coze Loop（罗盘），此举旨在降低开发门槛并吸引更多开发者参与。</div>
          </div>
          <div class="card-source">来源: 开源与社区支持</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
